<template>
	<view class="wrapper">
		<u-toast ref="uToast" /><u-no-network></u-no-network>
		<u-navbar title="销售商门店" safeAreaInsetTop fixed placeholder>
			<view class="coreshop-navbar-left-slot" slot="left">
				<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="home" size="22" @click="goHome"></u-icon>
			</view>
			<view slot="right">
			</view>
		</u-navbar>

		<view class="header">
			<image src="http://cdnjson.com/images/2024/11/02/c39c415b0d36ee611c122184601a6b9.png" alt="" />
			<view class="card">
				<view class="head">
					<view class="lf">
						<view class="name">{{supplierShopInfo.name}}</view>
						<view class="auth-text">
							<image class="auth-icon" src="/static/images/auth-icon.png" mode=""></image>
							{{supplierShopInfo.auth? '珍券供应链官方认证供应商' : '暂未认证为官方认证供应商'}}
						</view>
					</view>
					<image class="cover" :src="supplierShopInfo.url" mode=""></image>
				</view>
				<view class="class">
					<image class="class-icon" src="/static/images/class-icon.png" mode=""></image>
					<!-- 主营类目 -->
					主营类目:
					<template v-for="(item, index) in supplierShopInfo.class">
						<view class="class-item" :key="item">
							{{item}} {{ index == Number(supplierShopInfo.class.length - 1)? '' : '、'}}
						</view>
					</template>
				</view>
				<view class="tags">
					<template v-for="(item, index) in supplierShopInfo.tags">
						<view class="tag-item" :key="item">
							{{item}}
						</view>
					</template>
				</view>
			</view>

			<view class="back-icon">
			</view>
		</view>

		<view class="tabs">
			<view class="tab" v-for="(item, index) in tabs" :class="{tabActive: currTabIdx == index}"
				@click="handleTap(index)" :key="item">
				{{item}}
			</view>
		</view>

		<view class="switch-content">
			<template v-if="currTabIdx === 0">
				<view class="switch-content-item" v-for="(item, index) in shopList" :key="index">
					<image class="img-cover" :src="item.image" mode=""></image>
					<view class="info">
						<view class="title">{{item.name}}</view>
						<view class="tags">
							<view class="tag-item" v-for="tag in item.tags">{{tag}}</view>
						</view>
						<view class="price">￥{{Number(item.price).toFixed(2)}}</view>
					</view>
				</view>
			</template>
			<template v-else-if="currTabIdx === 1">
				<knEdit :iosScroll="true" @uploadImgBefore="uploadImgBefore" :readOnly="true"
					v-model="companyIntroduction" />
			</template>
			<template v-else-if="currTabIdx === 2">
				<knEdit :iosScroll="true" @uploadImgBefore="uploadImgBefore" :readOnly="true" />
			</template>
			<template v-else-if="currTabIdx === 3">
				<knEdit :iosScroll="true" @uploadImgBefore="uploadImgBefore" v-model="investmentPromotionInformation"
					:readOnly="true" />
			</template>
			<template v-else>
				评论区
			</template>
		</view>

		<view class="footer-card">
			<button open-type="share" class="lf-item" @click="handleShare">
				<image class="share-icon" src="/static/images/wx-icon.png" mode=""></image>
				<text>分享</text>
			</button>
			<view class="btns">
				<button class="phone-btn" @click="handlePhone">电话联系</button>
				<button class="supplier-btn" @click="handleApply">申请销售商</button>
			</view>
		</view>

		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
			<view class="popup-wrapper">
				<image class="img" :src="path" mode="widthFix"></image>
				<l-painter isCanvasToTempFilePath ref="painter" @success="path = $event"
					custom-style="position: fixed; left: 200%"
					css="width: 750rpx; padding-bottom: 40rpx; background: linear-gradient(,#ff971b 0%, #ff5000 100%)">
					<l-painter-image src="https://cdn.jsdelivr.net/gh/liangei/image@latest/avatar-1.jpeg"
						css="margin-left: 40rpx; margin-top: 40rpx; width: 84rpx;  height: 84rpx; border-radius: 50%;" />
					<l-painter-view css="margin-top: 40rpx; padding-left: 20rpx; display: inline-block">
						<l-painter-text text="隔壁老王"
							css="display: block; padding-bottom: 10rpx; color: #fff; font-size: 32rpx; fontWeight: bold" />
						<l-painter-text text="为您挑选了一个好物" css="color: rgba(255,255,255,.7); font-size: 24rpx" />
					</l-painter-view>
					<l-painter-view
						css="margin-left: 40rpx; margin-top: 30rpx; padding: 32rpx; box-sizing: border-box; background: #fff; border-radius: 16rpx; width: 670rpx; box-shadow: 0 20rpx 58rpx rgba(0,0,0,.15)">
						<l-painter-image
							src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
							css="object-fit: cover; object-position: 50% 50%; width: 606rpx; height: 606rpx; border-radius: 12rpx;" />
						<l-painter-view
							css="margin-top: 32rpx; color: #FF0000; font-weight: bold; font-size: 28rpx; line-height: 1em;">
							<l-painter-text text="￥" css="vertical-align: bottom" />
							<l-painter-text text="39" css="vertical-align: bottom; font-size: 58rpx" />
							<l-painter-text text=".39" css="vertical-align: bottom" />
							<l-painter-text text="￥59.99"
								css="vertical-align: bottom; padding-left: 10rpx; font-weight: normal; text-decoration: line-through; color: #999999" />
						</l-painter-view>
						<l-painter-view css="margin-top: 32rpx; font-size: 26rpx; color: #8c5400">
							<l-painter-text text="自营" css="color: #212121; background: #ffb400;" />
							<l-painter-text text="30天最低价"
								css="margin-left: 16rpx; background: #fff4d9; text-decoration: line-through;" />
							<l-painter-text text="满减优惠" css="margin-left: 16rpx; background: #fff4d9" />
							<l-painter-text text="超高好评" css="margin-left: 16rpx; background: #fff4d9" />
						</l-painter-view>
						<l-painter-view css="margin-top: 30rpx">
							<l-painter-text
								css="line-clamp: 2; color: #333333; line-height: 1.8em; font-size: 36rpx; width: 478rpx; padding-right:32rpx; box-sizing: border-box"
								text="360儿童电话手表9X 智能语音问答定位支付手表 4G全网通20米游泳级防水视频通话拍照手表男女孩星空蓝"></l-painter-text>
							<l-painter-qrcode css="width: 128rpx; height: 128rpx;"
								text="limeui.qcoon.cn"></l-painter-qrcode>
						</l-painter-view>
					</l-painter-view>
				</l-painter>

				<button class="save-btn" @click="handleSave">保存到本地</button>
			</view>
		</uni-popup>

		<!-- 登录提示 -->
		<coreshop-login-modal></coreshop-login-modal>
	</view>
</template>

<script>
	import knEdit from '@/components/lf-kn-editor/kn_editor.vue'
	export default {
		components: {
			knEdit
		},
		data() { //响应式数据
			return {
				supplierShopInfo: {
					id: null,
					name: '全沃', // 名称
					url: 'http://cdnjson.com/images/2024/11/01/image-1.png', // 图片
					auth: null, // 是否认证
					class: [], // 销售商列表
					tags: [] // 标签
				},
				tabs: [
					'产品',
					'企业介绍',
					'合作品牌',
					'招商信息',
					'评价'
				],
				currTabIdx: 0,
				shopList: [{
						url: 'http://cdnjson.com/images/2024/11/02/image-2.png',
						title: '全沃净水器RO反渗透厨房专用净水器一体机',
						tags: ['前置过滤器', 'RO膜'],
						price: 891
					},
					{
						url: 'http://cdnjson.com/images/2024/11/02/image-2.png',
						title: '全沃净水器RO反渗透厨房专用净水器一体机',
						tags: ['纯水机', 'RO膜'],
						price: 777
					},
					{
						url: 'http://cdnjson.com/images/2024/11/02/image-2.png',
						title: '全沃净水器RO反渗透厨房专用净水器一体机',
						tags: ['超滤机', 'PP棉'],
						price: 556
					},
					{
						url: 'http://cdnjson.com/images/2024/11/02/image-2.png',
						title: '全沃净水器RO反渗透厨房专用净水器一体机',
						tags: ['纯水机', 'RO膜'],
						price: 991
					},
					{
						url: 'http://cdnjson.com/images/2024/11/02/image-2.png',
						title: '全沃净水器RO反渗透厨房专用净水器一体机',
						tags: ['紫外线杀菌器', 'PP棉', '前置过滤器'],
						price: 990
					},
				],
				path: '',
				companyIntroduction: '', //企业介绍
				investmentPromotionInformation: '', // 合作品牌
				supplierId: '' // id
			}
		},
		onLoad(option) {
			const {
				id
			} = option
			console.log(option);
			this.getSupplierInfo(id)
			this.supplierId = id
		},
		methods: { // 方法
			async getSupplierInfo(id) {
				const {
					code,
					data
				} = await this.$u.api.getSupplierInfo({
					id
				})
				if (code === 0) {
					this.supplierShopInfo = {
						id: data.id,
						name: data.companyName,
						url: data.logoUrl ?? 'http://cdnjson.com/images/2024/11/01/image-1.png',
						auth: true,
						class: ['净水器', '滤芯', '净水龙头', '净水器配件'],
						tag: []
					}

					this.shopList = data.goodsList
					this.companyIntroduction = data.companyIntroduction
					this.investmentPromotionInformation = data.investmentPromotionInformation
				}
			},
			canvasToTempFilePath() {
				const _this = this
				// 渲染
				this.$refs.painter.render();
				// 生成图片
				this.$refs.painter.canvasToTempFilePathSync({
					fileType: "jpg",
					quality: 1,
					success: (res) => {
						console.log(res.tempFilePath);
						_this.path = res.tempFilePath;
					},
				});
			},
			handleShare(e) { // 分享方法
				console.log(e);
			},
			handlePhone(phone) { // 电话联系
				uni.makePhoneCall({
					phoneNumber: phone ?? 15665667558 //仅为示例
				});
			},
			handleApply() { // 申请销售商
				// this.$refs.popup.open('center')
				// this.canvasToTempFilePath()
				uni.navigateTo({
					url: `/pages/supplier/applySupplier/index?id=${this.supplierId}`
				})
			},
			handleTap(index) { // tap的点击
				this.currTabIdx = index
			},
			handleSave() {
				uni.saveImageToPhotosAlbum({
					filePath: this.path,
					success: function() {
						console.log('save success');
					}
				});
			},
			uploadImgBefore() {

			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		.header {
			position: relative;
			display: flex;
			flex-direction: column;
			width: 100%;
			height: 560rpx;

			image {
				width: 100%;
				height: 380rpx;
			}
		}

		.card {
			position: absolute;
			bottom: 0;
			width: 100%;
			padding: 28rpx 30rpx;
			background-color: #fff;
			border-radius: 36rpx;

			.auth-icon,
			.class-icon {
				width: 30rpx;
				height: 30rpx;
				margin-right: 14rpx;
			}

			.head {
				display: flex;
				justify-content: space-between;
				margin-bottom: 8rpx;
				font-size: 28rpx;

				.lf {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.name {
						color: #333;
						font-size: 46rpx;
					}

					.auth-text {
						display: flex;
						align-items: center;
						color: #D0241C;
					}
				}

				.cover {
					width: 110rpx;
					height: 110rpx;
				}
			}

			.class {
				display: flex;
				align-items: center;
				font-size: 28rpx;
			}

		}

		.tabs {
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 14rpx 30rpx;

			.tab {
				color: #333;
				font-size: 32rpx;
				line-height: 60rpx;
			}

			.tabActive {
				color: #D0241C;
				border-bottom: 6rpx solid #D0241C;
			}
		}

		.tags {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin-top: 18rpx;
			margin-left: 16rpx;
			margin-right: -20rpx;

			.tag-item {
				padding: 6rpx 12rpx;
				margin: 0 20rpx;
				margin-bottom: 15rpx;
				font-size: 26rpx;
				background-color: #FFDD9C;
				color: #EBA63D;
				border-radius: 18rpx;
			}
		}

		.switch-content {
			padding: 10rpx 30rpx;

			.switch-content-item {
				display: flex;
				align-items: center;
				border-radius: 20rpx;
				background-color: #fff;
				margin-bottom: 30rpx;

				.img-cover {
					width: 280rpx;
					height: 200rpx;
					border-radius: 20rpx;
				}

				.info {
					padding: 16rpx 26rpx;

					.tags,
					.tag-item {
						margin-left: 0;
					}

					.price {
						font-size: 32rpx;
						color: #D0241C;
					}
				}
			}
		}

		.footer-card {
			position: fixed;
			left: 0;
			bottom: 0;
			display: flex;
			width: 100%;
			height: 160rpx;
			align-items: center;
			justify-content: space-between;
			padding: 0 50rpx;
			background-color: #fff;

			.lf-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 90rpx;
				height: 110rpx;
				padding: 0;
				background-color: #fff;
				margin: 0;
				box-sizing: border-box;

				&::after {
					display: none;
					border: none;
				}

				.share-icon {
					width: 60rpx;
					height: 60rpx;
				}

				text {
					height: 40rpx;
					font-size: 26rpx;
				}
			}

			.btns {
				flex: 1;
				display: flex;
				justify-content: flex-end;
				align-items: center;

				.phone-btn,
				.supplier-btn {
					border-radius: 80rpx;
					width: 260rpx;
					height: 90rpx;
					line-height: 90rpx;
					text-align: center;
					color: #fff;
					border: none;
					font-weight: 500;
					margin: 0;
					margin-left: 20rpx;
				}

				.phone-btn {
					background-color: #FFA600;
				}

				.supplier-btn {
					background-color: #D0241C;
				}
			}
		}


		.popup-wrapper {
			position: relative;
			width: 76vw;
			height: 80vh;
			// border-radius: 24rpx;
			// background-color: #fff;
			box-sizing: border-box;

			.img {
				width: 100%;
				border-radius: 24rpx;
			}

			.save-btn {
				position: absolute;
				width: 60%;
				height: 42px;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				z-index: 9999997;
				background: linear-gradient(90deg, #ff004e, #ff4242);
				color: #fff;
				border-radius: 34rpx;
			}
		}
	}
</style>